{extend name="property/public/insidePageBase" /}
{block name="title"}编辑项目{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main" id="app">
        <div class="layui-form  layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-inline"><label class="layui-form-label">巡检位置</label>
                    <div class="layui-input-inline">
                        <input type="text" v-model="site_name" value="{$info['site_name']??''}" lay-verify="require" autocomplete="off" placeholder="请输入巡检位置名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline" pane="">
                    <label class="layui-form-label">位置状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="is_show" lay-filter="is_show" autocomplete="off" value="1" title="显示" :checked="is_show==1">
                        <input type="radio" name="is_show" lay-filter="is_show" autocomplete="off" value="2" title="隐藏" :checked="is_show==2">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">巡检类目</label>
                <div class="layui-input-block">
                    <draggable v-model="attr_value">
                        <div v-for="(item, index) in attr_value" :key="index" v-bind:index="index" class="item" style="margin-bottom: 5px;">
                            <input type="text" v-model="item.name" placeholder="请输入属性名称" class="layui-input" style="width: 340px;display: inline-block" lay-verify="required" autocomplete="off"/>
                            <input type="text" v-model="item.value" placeholder="请输入属性可选值" readonly  class="layui-input" style="width: 110px;display: inline-block" lay-verify="required" autocomplete="off"/>

                            <button class="layui-btn layui-btn-danger" type="button" v-on:click="del_attr_value(index)">删除</button>
                        </div>
                    </draggable>
                    <div class="layui-form-mid layui-word-aux">多个属性值需要用英文逗号","隔开,商家发布商品是即可下拉选择属性值</div>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" v-on:click="add_attr_value">添加属性</button>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea  v-model="remark"   placeholder="请输入备注说明" class="layui-textarea">{$info['remark']??''}</textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <button class="layui-btn layui-btn-sm layui-btn-normal" type="button" v-on:click="confirm_save">确定保存</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
{js href="/static/property/js/vue.min.js,/static/property/js/vue-module/vuedraggable/Sortable.min.js,/static/property/js/vue-module/vuedraggable/vuedraggable.umd.min.js" /}
<script>
    let draggable = vuedraggable;
    var app = new Vue({
        el: '#app',
        components: {
            draggable,
        },
        data: {
            add_rule: 2,
            remark: '{$info['remark']}',
            site_name: '{$info['site_name']}',
            is_show: '{$info['is_show']}',
            attr_value: {:json_encode($info['attr_value'],JSON_UNESCAPED_UNICODE)}
        },
    methods: {
        add_attr_value() {
            this.attr_value.push({
                name: '',
                value: ''
            });
        },
        del_attr_value(rowIndex) {
            let that = this;
            layer.confirm('是否确认删除此属性?', function(index) {
                layer.close(index);
                that.attr_value.splice(rowIndex, 1);
            });
        },
        confirm_save() {
            if(this.site_name == '') {
                return layer.msg('巡检位名称不能为空');
            }
            let attrValue = [];
            let repeatAttr = false;
            for(const key in this.attr_value) {
                if(this.attr_value[key].name !== '') {
                    for(const key2 in attrValue) {
                        if(attrValue[key2].name === this.attr_value[key].name) {
                            repeatAttr = true;
                            break;
                        }
                    }
                    if(repeatAttr) {
                        break;
                    }
                    attrValue.push(this.attr_value[key])
                }
            }
            if(repeatAttr) {
                return layer.msg('存在重复的属性名');
            }
            if(attrValue.length == 0) {
                return layer.msg('请至少添加一条属性')
            }
            var loadAdd = layer.msg('保存中', {icon: 16, time: 0, shade: 0.1, offset: '15px'});
            $.post("{:url('propertyInspectionSiteEdit')}?id={$info['id']}", {
                remark:this.remark,
                site_name:this.site_name,
                attr_value:this.attr_value,
                is_show:this.is_show,
            }, function (res) {
                layer.close(loadAdd);
                if (res.code === 0) {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    parent.layer.msg(res.msg, {icon: 6, offset: '15px'});
                } else {
                    layer.msg(res.msg, {icon: 5, offset: '15px'});
                }
            });
            return false;
        }
    }
    });

    layui.use(['form'], function() {
        var form = layui.form

        form.on('radio(is_show)', function(item) {
            app.is_show = item.value
        })
    })
</script>
{/block}